
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="brandApp">
    <a href="http://localhost:8080/ajax_demo_war/add.html"><input type="button" value="新增"></a>
<hr>
<table border="1" cellspacing="0" width="100%" id="brandTable" name="brandTable">
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <tr v-for="(brand,id) in brands" >
        <td>{{id+1}}</td>
        <td>{{brand.brandName}}</td>
        <td>{{brand.companyName}}</td>
        <td>{{brand.ordered}}</td>
        <td>{{brand.description}}</td>
        <td>{{brand.status==1?'启用':'禁用'}}</td>
        <td><a href="" >修改</a>
            <a href="">删除</a></td>
    </tr>

</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    new Vue({
        el:"#brandApp",
        data(){
            return{
                brands:[]
            }
        },
        mounted(){
            var _this=this;
            axios({
                method:"post",
                url:"http://localhost:8080/ajax_demo_war/brandServlet",
            }).then(function(resp)
            {
                _this.brands=resp.data;
            })
        }
    });





    // document.getElementById("add").onclick=function (){
    //     window.location.href="http://localhost:8080/ajax_demo_war/addBrand.html";
    // }
    //
    // window.onload=function (){
    //     var tableDate=" <tr>\n" +
    //         "        <th>序号</th>\n" +
    //         "        <th>品牌名称</th>\n" +
    //         "        <th>企业名称</th>\n" +
    //         "        <th>排序</th>\n" +
    //         "        <th>品牌介绍</th>\n" +
    //         "        <th>状态</th>\n" +
    //         "        <th>操作</th>\n" +
    //         "    </tr>"
    //
    //     axios.get("http://localhost:8080/ajax_demo_war/brandServlet").then(function(response){
    //         var brands=response.data;
    //         for(var i=0;i<brands.length;i++){
    //             var brand=brands[i];
    //
    //             tableDate+= "<tr>\n" +
    //                 "                    <td>"+(i+1)+"</td>\n" +
    //                 "                    <td>"+brand.brandName+"</td>\n" +
    //                 "                    <td>"+brand.companyName+"</td>\n" +
    //                 "                    <td>"+brand.ordered+"</td>\n" +
    //                 "                    <td>"+brand.description+"</td>\n" +
    //                 "                    <td>"+(brand.status==1?'启用':'禁用')+"</td>\n" +
    //                 "                    <td><a href=\"/brand_demo_war/SelectByIdServlet?id="+brand.id+" \" >修改</a>\n" +
    //                 "                        <a href=\"/brand_demo_war/DeleteServlet?id="+brand.id+"\">删除</a></td>\n" +
    //             "</tr>";
    //         }
    //         window.console.log(tableDate);
    //         window.console.log(111);
    //         document.getElementById("brandTable").innerHTML=tableDate;
    //     })
    //
    //
    // }

</script>



</body>
</html>
